<template>
  <div class="main">
    <div class="kecheng-wrap">
      <h2>在学课程</h2>
      <div class="flex">
        <div class="kecheng-item a" v-for="item in 14" :key="item">
          <img src="" />
          <h3>课程名称001</h3>
          <div class="flex-yc">
            <span>已学40%</span>
            <i class="iconfont icon-youjiantou"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="container-wrap" v-for="item in article" :key="item.id">
      <article-com :article="item">
        <div
          class="comment-img-wrap flex-yc a"
          @click="$router.push('/forum/index/detail')"
        >
          <img src="" />
          <img src="" />
          <img src="" />
          <img src="" />
        </div>
      </article-com>
    </div>
  </div>
</template>

<script setup lang="ts">
import ArticleCom from '@/pages/forum/components/ArticleCom.vue'
import { reactive } from 'vue'
import { articleType } from '@/pages/forum/types/article.ts'

const article = reactive<articleType[]>([
  {
    id: 1,
    tag: '【思路分享】',
    title: '活了？scBasePipeline2.2报错',
    content:
      '随着我们不断长大，大脑的前额皮质开始发育，理智脑的战斗力才慢慢增强。不过理智脑的战斗力其实表现在两方面：一方面是侧重学习、理解、记忆、运算的认知能力，即我们在校学习时主要锻炼的部分，另一方面则是侧重观察、反思、判断、选择的元认知能力。',
    commentSum: 30,
    commentLikeSum: 50,
    commentTime: '2023-02-26 13:26:30',
    user: {
      userId: 20,
      userAvatar: 'http://baidu.com/1.png',
      username: '李斯',
    },
  },
  {
    id: 1,
    tag: '【思路分享】',
    title: '活了？scBasePipeline2.2报错',
    content:
      '随着我们不断长大，大脑的前额皮质开始发育，理智脑的战斗力才慢慢增强。不过理智脑的战斗力其实表现在两方面：一方面是侧重学习、理解、记忆、运算的认知能力，即我们在校学习时主要锻炼的部分，另一方面则是侧重观察、反思、判断、选择的元认知能力。',
    commentSum: 30,
    commentLikeSum: 50,
    commentTime: '2023-02-26 13:26:30',
    user: {
      userId: 20,
      userAvatar: 'http://baidu.com/1.png',
      username: '李斯',
    },
  },
])
</script>

<style scoped lang="scss">
.kecheng-wrap {
  padding: 17px 18px;
  background-color: #fff;
  border-radius: 4px;

  h2 {
    margin-bottom: 19px;
    font-size: 16px;
    color: #333;
  }

  > .flex {
    flex-wrap: wrap;

    .kecheng-item {
      padding-bottom: 10px;
      margin-right: 19px;
      margin-bottom: 15px;

      &:nth-child(5n) {
        margin-right: 0;
      }

      &:hover {
        color: $primary;
        box-shadow: rgb(0 0 0 / 10%) 0 0 36px;
      }

      > img {
        width: 210px;
        height: 150px;
        margin-bottom: 10px;
        background-color: #eee;
        border-radius: 4px;
      }

      h3 {
        font-size: 14px;
        font-weight: 500;
        color: #021429;
      }

      > .flex-yc {
        justify-content: space-between;
        margin-top: 3px;
        font-size: 12px;
        color: #8691a3;

        i {
          font-size: 16px;
          color: $primary;
        }
      }
    }
  }
}

.container-wrap {
  padding: 22px 25px;
  margin-top: 16px;
  background-color: #fff;
  border-radius: 4px;

  .comment-img-wrap {
    flex-wrap: wrap;

    img {
      width: 188px;
      height: 162px;
      margin-right: 20px;
      background-color: #d9d9d9;
      border-radius: 4px;
    }
  }
}
</style>
